import {history, connect, useDispatch, useModel} from 'umi'
import {Row, Col, Form, Button, Space, Upload, message} from 'antd'

import React, {useState, useEffect} from 'react'
import {useLocation} from 'react-router'
import {FormInput} from '@/components/SearchForm/SearchFormItem'
import {uploadFileUrl} from '@/service/common/upload'
import styles from './index.less'
import cardStyles from '../index.less'
import {orderSigned} from '@/service/order'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 12, offset: 0},
	},
}
function Signing(props: any) {
	const {
		global: {currentRoute},
	} = props
	const dispatch = useDispatch()
	const [loading, setLoading] = useState(false)
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const [orderIds, setOrderIds] = useState('')
	const [fileList, setFileList] = useState<any>([])
	// 获取路由中订单编号
	const location = useLocation()
	const routerName = () => {
		setOrderIds(location?.search?.split('id=')[1])
	}
	useEffect(() => {
		routerName()
	}, [orderIds])
	const onCancel = () => {
		dispatch({
			type: 'global/deleteTabs',
			payload: currentRoute,
		})
		history.goBack()
	}
	const onFinish = (values: any) => {
		setLoading(true)
		orderSigned(orderIds, values).then((res) => {
			if (res.success) {
				setLoading(false)
				onCancel()
			} else {
				message.error(res?.msg)
			}
		})
	}

	const onFinishFailed = (errorInfo: any) => errorInfo
	const [form] = Form.useForm()

	//  文件上传生成上传信息
	const uploadProps = {
		action: uploadFileUrl,
		name: fileName, // 滴滴上传:file 测试上传:files
		data: {
			modelName: 'carOrder',
			targetAttr: 2,
		},
		beforeUpload: (file: any) => {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				message.error('文件必须小于200MB')
			}
			return isLt200M
		},
		onChange(info: any) {
			if (info.file.status === 'done') {
				setFileList(info?.fileList)
				const list: any = []
				info?.fileList?.forEach((res: any) => {
					list.push(res?.response?.data.id)
				})
				form.setFieldsValue({attachmentList: list})
			}
			setFileList(info?.fileList)
		},
		onRemove(info: any) {
			form.setFieldValue('attachmentList', '')
			message.success(`${info?.name}移除成功`)
		},
		fileList,
	}
	return (
		<div className={cardStyles.card} id="contract">
			<p className={cardStyles.title}>合同信息</p>
			<div className={styles.form}>
				<Form
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
					{...formLayout}
					form={form}>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={24}>
							<FormInput
								name="remark"
								label="备注"
								maxLength={200}
								placeholder="请填写绑车备注信息，不超过200个字符"
								allowClear
								style={{width: '600px'}}
							/>
						</Col>
						<Col span={24}>
							<Form.Item
								label="合同附件上传"
								name="attachmentList"
								rules={[
									{required: true, message: '请上传合同附件'},
								]}>
								<Upload {...uploadProps}>
									{fileList?.length >= 5 ? null : (
										<Button>请选择文件</Button>
									)}
								</Upload>
								<p style={{margin: '15px 0 0 0'}}>
									清单说明：附件最大支持30M，
								</p>
								<p>支持格式：PDF、Word、Excel、JPG、PNG</p>
							</Form.Item>
						</Col>
					</Row>
					<Row
						justify="center"
						gutter={24}
						style={{marginTop: '20px'}}>
						<Form.Item>
							<Space>
								<Button shape="round" onClick={onCancel}>
									取消
								</Button>
								<Button
									shape="round"
									type="primary"
									htmlType="submit"
									loading={loading}>
									提交
								</Button>
							</Space>
						</Form.Item>
					</Row>
				</Form>
			</div>
		</div>
	)
}

export default connect(({order: {details}, global}: any) => ({
	orderId: details.id,
	global,
}))(Signing)
